<!-- 编辑文章弹窗 -->
<script setup lang="ts">
import {ref, reactive, nextTick} from 'vue'
import WangEditor from '@/components/WangEditor/index.vue'
import type {UploadProps} from 'element-plus'
import type {
    IArticleAddRequest
} from '@/api/interface/article'

defineOptions({
    name: 'UpdateArticleDialog',
})

const emit = defineEmits<{
    (e: 'submit', form: IArticleAddRequest): void
}>()

const editorRef = ref<InstanceType<typeof WangEditor>>()
const visible = ref(false)
const form = reactive<IArticleAddRequest>({
    title: '',
    content: '',
    summary: '',
    coverImage: '',
    isCommentEnabled: '1',
    isTop: '0',
    recommendWeight: '',
})

const handleImageSuccess: UploadProps['onSuccess'] = (response) => {
    form.coverImage = response.data.url
}

const handleSubmit = () => {
    form.content = editorRef.value?.getContent() || ''
    emit('submit', form)
}

// top
defineExpose({
    open: (row: IArticleAddRequest) => {
        visible.value = true
        Object.assign(form, row)
        nextTick(() => {
            editorRef.value?.setContent(form.content)
        })
    },
    close: () => {
        visible.value = false
    },
    reset: () => {
        Object.assign(form, {
            title: '',
            content: '',
            summary: '',
            coverImage: '',
            isCommentEnabled: '1',
            isTop: '0',
            recommendWeight: '0',
        })
    },
})
</script>

<template>
    <ElDialog
        v-model="visible"
        title="编辑"
        width="60%"
    >
        <ElForm :model="form" label-width="100px">
            <ElFormItem label="标题">
                <ElInput v-model="form.title" placeholder="请输入标题"/>
            </ElFormItem>
            <ElFormItem label="摘要">
                <ElInput v-model="form.summary" placeholder="请输入摘要(可填)"/>
            </ElFormItem>
            <ElFormItem label="封面图片">
                <ElUpload
                    class="avatar-uploader"
                    action="/api/upload/qn"
                    :show-file-list="false"
                    :on-success="handleImageSuccess"
                >
                    <img v-if="form.coverImage" :src="form.coverImage" class="avatar"/>
                    <ElIcon v-else class="avatar-uploader-icon">
                        <Plus/>
                    </ElIcon>
                </ElUpload>
            </ElFormItem>
            <ElRow>
                <ElCol :span="12">
                    <ElFormItem label="是否置顶">
                        <ElSwitch
                            v-model="form.isTop"
                            :active-value="'1'"
                            :inactive-value="'0'"
                        />
                    </ElFormItem>
                </ElCol>
                <ElCol :span="12">
                    <ElFormItem label="是否开启评论">
                        <ElSwitch
                            v-model="form.isCommentEnabled"
                            :active-value="'1'"
                            :inactive-value="'0'"
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>
            <ElFormItem label="推荐权重">
                <ElInput
                    v-model="form.recommendWeight"
                    placeholder="请输入推荐权重(1-100)"
                />
            </ElFormItem>
            <ElFormItem label="正文">
                <WangEditor ref="editorRef"/>
            </ElFormItem>
        </ElForm>
        <template #footer>
            <ElButton  @click="visible = false">取消</ElButton>
            <ElButton type="primary" @click="handleSubmit">更新</ElButton>
        </template>
    </ElDialog>
</template>

<style scoped lang="scss">
.avatar-uploader {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader:hover {
    border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
